<template>
	<view class="page-content">
		<u-navbar title="注册" autoBack bgColor="#D9EDD4" fixed safeAreaInsetTop placeholder></u-navbar>
		
		<view class="enroll-box">
			<view class="content-top">
				<view class="content-title">手机号注册</view>
				<view class="content-text">使用手机号注册更方便！</view>
			</view>
			<view class="content-center">
				<input class="input-text" type="text" v-model="nickName" placeholder="请输入昵称">
				<input class="input-text" type="text" v-model="phone" placeholder="请输入手机号">
				<input class="input-text" type="password" v-model="userPwd1" placeholder="请输入密码">
				<input class="input-text" type="password" v-model="userPwd2" placeholder="请再次输入密码">
				<button class="btn" @click="enroll()">注册</button>
			</view>
			<view class="content-btm">
				<view class="third-party">第三方账号登陆</view>
				<view class="picture">
					<u-icon size="40" name="weixin-circle-fill"></u-icon>
					<u-icon size="40" name="qq-circle-fill"></u-icon>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return{
				nickName:'',
				phone:'',
				userPwd1:'',
				userPwd2:''
			}
		},
		methods:{
			// 注册
			enroll(){
				if(this.userPwd1==this.userPwd2){
					uni.request({
						url: "http://localhost:3000/user/regist",
						method: "POST",
						data: {
							username: this.nickName,
							phone: this.phone,
							password: this.userPwd1,
						},
						success: (res) => {
							if(res?.data?.code==200){
								console.log('code==200');
								setTimeout(function() {
								  uni.navigateTo({
								  	url: "/pages/login/login"
								  })
								}, 1000); 
							}
							else{
								console.log('code!=200');
								this.$u.toast(res?.data?.data?.message);
							}
						},
						fail:(res) => {
							console.log('失败');
							this.$u.toast(res?.data?.msg);
						}
					})
				}
				else{
					this.$u.toast('两次密码不同');
				}
			},
		}
	}
</script>

<style scoped lang="scss">
	.enroll-box{
		height: 800px;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding: $uni-spacing-col-lg $uni-spacing-row-lg;
		height: 700px;
		.content-top{
			padding: $uni-spacing-col-lg $uni-spacing-row-sm;
			.content-title{
				font-size: $gs-font-lg;
				color: $uni-text-color;
				padding: $uni-spacing-col-lg 0;
			}
			.content-text{
				font-size: $uni-font-size-base;
				color: $uni-text-color;
			}
		}
		.content-center{
			padding: $uni-spacing-col-lg $uni-spacing-row-lg;
			border-radius: 30rpx;
			background-color: rgba(250, 250, 250, 0.8);
			.input-text{
				color: #939393;
				line-height: 100rpx;
				background-color: $gs-jpBg;
				border-radius: 20rpx;
				margin-left: auto;
				margin-right: auto;
				margin: $gs-spacing-col-lg $uni-spacing-row-lg;
				padding: $uni-spacing-col-lg $uni-spacing-row-lg;
			}
			.btn{
				text-align: center;
				background-color: #acd6ae;
				border-radius: 60rpx;
				padding: $uni-spacing-col-sm $uni-spacing-row-sm;
				margin: $gs-spacing-col-lg $uni-spacing-row-lg;
			}
		}
		.content-btm{
			padding: $uni-spacing-col-lg $uni-spacing-row-lg;
			.third-party{
				padding: $uni-spacing-col-lg $uni-spacing-row-lg;
				font-size: $uni-font-size-sm;
				color: $uni-text-color-grey;
				text-align: center;
			}
			.picture{
				width:60%;
				display: flex;
				align-items: center;
				justify-content: space-evenly;
				padding: $uni-spacing-col-lg 0;
				margin-left: auto;
				margin-right: auto;
			}
		}
	}
</style>